<template>
<q-popup-proxy ref="calendarDialog" context-menu @before-show="showDialog($event)">
  <div class="calendar-dialog" style="min-width: 400px" v-if="show">
    <q-tabs
      v-model="tab" @input="changeTab"
      shrink stretch dense
      inline-label
      align="left"
      class="text-grey"
      active-color="primary"
      indicator-color="primary"
    >
      <q-tab name="holiday" label="设置工作日"/>
<!--      <q-tab name="team" label="设置班组"/>-->
    </q-tabs>
    <q-separator class="line"/>
    <q-tab-panels v-model="tab" keep-alive animated class="full-height">
      <q-tab-panel name="holiday" style="padding: 0px 29px 0px" class="full-height flex"
                   :style="{'min-height':28+shifts.length*50+'px'}">
        <q-select class="items-center full-width" outlined dense options-dense v-model="dayType"
                  :options="dateType" />
      </q-tab-panel>
      <q-tab-panel name="team" style="padding: 10px 29px 0px" class="full-height" :style="{'min-height':28+shifts.length*50+'px'}">
        <q-select v-for="(shift,shiftIndex) in shifts" :key="shiftIndex" :rules="[]"
                  outlined dense options-dense v-model="shiftVal[shift.value].team" :options="teamList">
          <template v-slot:before>
            <span class="form-name">{{shift.label}}：</span>
          </template>
          <template v-slot:append>
            <q-icon name="close" @click.stop="clearTeam(shift.value)"
                    v-if="shiftVal[shift.value].team && shiftVal[shift.value].team.value"
                    class="cursor-pointer" style="font-size: 18px" />
          </template>
        </q-select>
      </q-tab-panel>
    </q-tab-panels>
    <div class="dialog-footer text-right">
      <q-btn outline label="取消" color="primary" @click="hideDialog" class="q-mr-md"/>
      <q-btn unelevated label="确认" color="primary" @click="submit" :loading="submitting"/>
    </div>
  </div>
</q-popup-proxy>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'calendar-dialog',
  props: {
    itemDay: {
      type: Object
    },
    shifts: {
      type: Array
    },
    info: {},
    parentTab: {
      type: String,
      default: 'holiday'
    }
  },
  data () {
    return {
      tab: 'holiday', // 'holiday' or 'team',
      dayType: null, // 选中的公休日
      shiftVal: null,
      submitting: false,
      show: false // 弹框是否显示
    }
  },
  computed: {
    ...mapGetters([
      'dateType',
      'teamList'
    ])
  },
  methods: {
    // 显示弹框
    showDialog (event) {
      this.tab = this.parentTab
      if (this.info) {
        this.dayType = this.dateType.find(item => {
          return item.value === this.info.workStatus
        })
      } else {
        this.dayType = this.dateType[0]
      }
      if (this.info) {
        const shiftVal = {}
        for (let i = 0; i < this.shifts.length; i++) {
          // 判断是否有班组
          if (this.info.shifts[this.shifts[i].value]) {
            shiftVal[this.shifts[i].value] = this.info.shifts[this.shifts[i].value]
          } else {
            shiftVal[this.shifts[i].value] = {
              id: this.shifts[i].value,
              schedulingId: null,
              shiftsName: this.shifts[i].name,
              team: null
            }
          }
          this['team' + this.shifts[i].value] = null
        }
        this.shiftVal = JSON.parse(JSON.stringify(shiftVal))
      } else {
        const shiftVal = {}
        for (let i = 0; i < this.shifts.length; i++) {
          shiftVal[this.shifts[i].value] = {
            id: this.shifts[i].value,
            schedulingId: null,
            shiftsName: this.shifts[i].name,
            team: null
          }
          this['team' + this.shifts[i].value] = null
        }
        this.shiftVal = JSON.parse(JSON.stringify(shiftVal))
      }
      this.show = true
      this.$emit('setActDay', this.itemDay, event)
    },
    // 隐藏弹框
    hideDialog () {
      this.$refs.calendarDialog.hide()
      this.$emit('clearActDay')
    },
    // 清空当前班组
    clearTeam (teamId) {
      this.shiftVal[teamId].team = {
        label: '',
        value: -1
      }
    },
    // 提交
    submit () {
      const params = []
      for (let i = 0; i < this.shifts.length; i++) {
        let param = null
        if (this.shiftVal[this.shifts[i].value].team) {
          param = {
            shiftsId: this.shiftVal[this.shifts[i].value].id,
            // id: this.shiftVal[this.shifts[i].value].schedulingId,
            teamId: this.shiftVal[this.shifts[i].value].team.value,
            workStatus: this.dayType.value ? this.dayType.value : this.dayType
          }
        } else {
          param = {
            shiftsId: this.shiftVal[this.shifts[i].value].id,
            // id: null,
            teamId: -1,
            workStatus: this.dayType.value ? this.dayType.value : this.dayType
          }
        }
        if (this.info) {
          param.shiftsModeId = this.info.shiftsModelId
        }
        params.push(param)
      }
      this.$emit('submit', params)
      this.hideDialog()
    },
    changeTab () {
      this.$emit('changeTab', this.tab)
    }
  }
}
</script>

<style scoped lang="stylus">
.calendar-dialog{
  .dialog-footer{
    padding 0 10px 5px
  }
  .q-btn {
    padding: 0;
    min-width: 96px;
    min-height: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    height: 32px;
  }
  .form-name{
    font-size 16px
    color #333
  }
}
</style>
